---
title: Tag
description: "`Tag` is a component used to categorize or organize items using keywords that describe them."
storybook: components-tag--basic
source: components/tag
style: components/tag/tag.style.ts
---

```tsx preview
<Tag>Tag</Tag>
```

## Usage

:::code-group

```tsx [package]
import { Tag } from "@yamada-ui/react"
```

```tsx [alias]
import { Tag } from "@/components/ui"
```

```tsx [monorepo]
import { Tag } from "@workspaces/ui"
```

:::

```tsx
<Tag />
```

### Change Variants

```tsx preview
<Wrap gap="md">
  <For each={["solid", "subtle", "surface", "outline"]}>
    {(variant) => (
      <Tag key={variant} variant={variant}>
        {variant}
      </Tag>
    )}
  </For>
</Wrap>
```

### Change Size

```tsx preview
<Wrap gap="md">
  <For each={["sm", "md", "lg"]}>
    {(size) => (
      <Tag key={size} size={size}>
        {size}
      </Tag>
    )}
  </For>
</Wrap>
```

### Change Color Scheme

```tsx preview
<Wrap gap="md">
  <For each={["success", "warning", "error"]}>
    {(colorScheme) => (
      <Tag key={colorScheme} colorScheme={colorScheme}>
        {colorScheme}
      </Tag>
    )}
  </For>
</Wrap>
```

### Use with Icon

```tsx preview
<Wrap gap="md">
  <Tag startIcon={<PlusIcon />}>startIcon</Tag>
  <Tag endIcon={<PlusIcon />}>endIcon</Tag>
</Wrap>
```

### Use Close Button

```tsx preview functional client
const onClose = () => {
  // Handle close action
  console.log("Tag closed")
}

return <Tag onClose={onClose}>Tag</Tag>
```

### Disable Close Button

```tsx preview client
<Tag disabled onClose={() => {}}>
  Tag
</Tag>
```

## Props

<PropsTable name="tag" />

## Accessibility

Currently, this section is being updated due to the migration of v2.
